<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="查询条件">
      <el-input v-model="findForm.content" placeholder="内容"></el-input>
    </el-form-item>
    <el-form-item label="审核类型">
      <el-select clearable v-model="findForm.type" placeholder="请选择">
        <el-option
          v-for="item in types"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="审核状态">
      <el-select clearable v-model="findForm.state" placeholder="请选择">
        <el-option
          v-for="item in states"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="contentSub"
        label="内容"
        width="250">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="100">
      </el-table-column>
      <el-table-column
        prop="state"
        width="100"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="addTime"
        width="140"
        label="添加时间">
      </el-table-column>
      <el-table-column
        prop="adminId"
        width="140"
        label="审核人ID">
      </el-table-column>
      <el-table-column
        prop="remark"
        width="140"
        label="审核意见">
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button type="primary" @click="detail(scope.row)">查看内容</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="findForm.size"
      @current-change="handleCurrentChange"
    >
    </el-pagination>

    <!-- 查看详细内容 -->
    <el-dialog
      title="查看详细内容"
      :visible.sync="visible"
      :destroy-on-close="close_modal_destroy"
      :close-on-click-modal="close_modal"
      @close="handleCancel"
      width="500px"
    >
      <div v-html="this.detailContent">
      </div>
      <br/>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="审核意见"
        v-model="detailData.remark">
      </el-input>
      <br/>
      <br/>
      <el-button type="success" @click="pass">通过</el-button>
      <el-button type="danger" @click="unpass">不通过</el-button>
      <el-button type="info" @click="handleCancel">取消</el-button>
    </el-dialog>
  </el-form>
</div>
</template>

<script>
import {findListExamine, pass, unpass} from "@/api/review";
import {setToken} from "@/utils/auth";

export default {
  name: "contentReview",
  data() {
    return {
      visible: false,
      total: undefined,
      close_modal_destroy: true,
      close_modal: false,
      detailContent: "",
      tableData: [],
      detailData: {
        id: undefined,
        remark: undefined,
      },
      formInline: {},
      findForm: {
        state: undefined,
        content: undefined,
        type: undefined,
        page: 1,
        size: 10
      },
      types: [{
        value: '1',
        label: '生活分享'
      }, {
        value: '2',
        label: '计划'
      }, {
        value: '3',
        label: '朗读'
      }],
      states: [{
        value: '1',
        label: '通过'
      }, {
        value: '2',
        label: '未通过'
      }, {
        value: '3',
        label: '等待处理'
      }],
    }
  },
  created() {
    this.getAllReviews()
  },
  methods: {
    onSubmit() {
      this.getAllReviews()
    },
    detail(row) {
      this.detailContent = row.content
      this.detailData.id = row.id
      this.visible = true
    },
    handleCurrentChange(page) {
      this.findForm.page = page
      this.getAllReviews()
    },
    getAllReviews() {
      findListExamine(this.findForm).then(res => {
        this.tableData = res.body.data.dtos
        this.total = res.body.data.total
        for (var i =0 ;i<this.tableData.length;i++) {
          this.tableData[i].contentSub = this.tableData[i].content.substr(0,10)
        }
      })
    },
    handleCancel() {
      this.close()
      loginGetToken(this.user).then(res => {
        setToken(res.body.data)

      }).catch(error => {
        console.log(error)
      })
    },
    close() {
      this.detailContent = undefined
      this.detailData.id = undefined
      this.detailData.remark = ""
      this.visible = false
      this.getAllReviews()
    },
    async pass() {
      await pass(this.detailData).then(res => {
        if (res.body.data)
          this.$message.success("通过审核")
        else
          this.$message.error("请重新操作")
      })
      this.close()
    },
    async unpass() {
      await unpass(this.detailData).then(res => {
        if (res.body.data)
          this.$message.success("不通过审核")
        else
          this.$message.error("请重新操作")
      })
      this.close()
    }
  }
}
</script>

<style scoped>

</style>
